<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据用户输入，弹窗显示内容</title>
    <script src="js/vue.js"></script>
</head>
<!--练习要求
1. 用户可以在输入框输入内容
2. 点击按钮，可以显示书名
-->
<body>

<div id = "app">
    <h1>{{message}}</h1>
    书名:<input type="text" v-model="bookName" >
    <button v-on:click="printContent">点击显示输入框的内容</button>
</div>

</body>

<script>
    let vm = new Vue({
        el:"#app",
        data:{
            message:"显示Vue事件绑定操作",
            bookName:"天龙八部"
        },
        methods:{
            printContent(){
                alert(this.bookName);
            }
        }
    })
</script>
</html>